.wrap {
  margin: 0 auto;
  box-sizing: border-box;
  max-width: 125rem;
  header {
    max-width: 125rem;
    position: fixed;
    width: 100%;
    height: 4.5rem;
    margin-top: -4.5rem;
    background: #fafafaff;
    z-index: 1;
    padding: 1.33rem 4.63rem;
    display: flex;
    align-items: center;
    .logo {
      margin-right: 2rem;
      a {
        img {
          width: 6.94rem;
          height: 1.85rem;
        }
      }
    }
    .nav {
      width: 52.63rem;
      height: 3.38rem;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-items: center;
      li {
        width: 3.26rem;
        height: 0.94rem;
        color: #000000ff;
        font-size: 0.75rem;
        font-weight: bold;
        font-family: 'PingFang SC';
        text-align: center;
        line-height: 0.75rem;
        letter-spacing: 0.06rem;
        a {
          padding-bottom: 0.2rem;
          text-decoration: none;
          // transition: all 0.3s;
        }
        a:hover {
          color: red;
        }
        .menu {
          position: absolute;
          top: 3.85rem;
          width: 100%;
          height: 23.2rem;
          background-color: white;
          left: 0;
          box-sizing: border-box;
          display: none;
          .mbox {
            width: 100%;
            margin-top: 4rem;
            padding: 0 0 4rem 4.5rem;
            display: flex;
            ul {
              width: 100%;
              flex: 1;
              display: flex;
              flex-direction: column;
              li {
                width: 100%;
                margin-bottom: 1.4rem;
                text-align: left;
                flex-grow: 1;
                p {
                  width: 100%;
                  font-size: 1.4rem;
                }
                a {
                  font-size: 1rem;
                  font-weight: 400;
                  border-bottom: 1px solid transparent;
                }
                a:hover {
                  color: red;
                  border-bottom-color: red;
                }
              }
              :first-child {
                margin-bottom: 1.8rem;
              }
            }
          }
          .allmenu {
            width: 100%;
            height: 4rem;
            padding: 1.5rem 0 0 4.5rem;
            background-color: pink;
            p {
              width: 100%;
              text-align: left;
              a {
                font-size: 1rem;
                font-weight: 400;
                span {
                  font-size: 1rem;
                  font-weight: bold;
                  margin-right: 0.75rem;
                }
              }
            }
          }
        }
      }
      :last-child {
        width: 4.58rem;
        height: 1.69rem;
        a {
          border-bottom: none;
        }
      }
    }
    .navactive {
      color: red;
      border-bottom: 2px solid red;
    }
    .menuactive {
      display: block !important;
    }
    .serch {
      position: absolute;
      top: 1.41rem;
      right: 3.72em;
      button {
        background: #fafafaff;
        border: none;
        cursor: pointer;
        .iconfont {
          display: block;
          font-size: 1.5rem;
          font-weight: bold;
        }
      }
      form {
        position: absolute;
        top: -1.5rem;
        right: -3rem;
        width: 30rem;
        height: 4.5rem;
        background-color: black;
        display: flex;
        padding: 1.2rem;
        display: none;
        input {
          width: 18rem;
          height: 2rem;
          font-size: 1rem;
          background-color: black;
          border: none;
          color: white;
          outline: none;
        }
        .iconfont {
          position: absolute;
          top: 1rem;
          right: 1.5rem;
          width: 2rem;
          height: 2rem;
          padding: 0.625rem;
          display: block;
          color: white;
          cursor: pointer;
        }
        .iconfont:hover {
          color: red;
        }
        #serchipt {
          display: none;
          position: absolute;
          top: 1rem;
          right: 5rem;
          font-size: 1.1rem;
        }
      }
    }
  }
  main {
    margin-top: 4.5rem;
    overflow: hidden;
    .filterheader {
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      height: 42rem;
      background-size: contain;
      background-repeat: no-repeat;
      .title {
        width: 73.13rem;
        height: 11.75rem;
        background: #ffffffff;
        margin: 25rem auto 0;
        padding: 2.8rem 0 0 10rem;
        h1 {
          color: #000000ff;
          font-size: 3.75rem;
          font-weight: bold;
          margin-bottom: 2rem;
        }
        p {
          font-size: 1rem;
          font-weight: 300;
        }
      }
    }
    .tabulation {
      .serch {
        margin: 0 auto;
        width: 75rem;
        height: 5rem;
        display: flex;
        .ipt {
          position: relative;
          width: 50rem;
          height: 5rem;
          box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.2);
          p {
            position: absolute;
            top: 1.72rem;
            left: 3.06rem;
            font-size: 1.25rem;
            font-weight: bold;
          }
        }
        .demand {
          width: 25rem;
          height: 5rem;
          background: #000000ff;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-items: center;
          a {
            span {
              color: #ffffffff;
              font-size: 0.75rem;
              margin-right: 1.5rem;
              font-weight: bold;
            }
            .iconfont {
              color: #ffffffff;
            }
          }
          a:hover {
            span,
            i {
              color: red;
            }
          }
        }
      }
      .commodities {
        margin: 4.5rem auto 0;
        width: 75rem;
        ul {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 4rem;
          li {
            width: 13rem;
            height: 32rem;
            margin-bottom: 2.5rem;
            margin-right: 2.5rem;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            a {
              .picture {
                width: 13rem;
                height: 17.52rem;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              p,
              h2 {
                margin-top: 3.56rem;
                font-size: 0.75rem;
                font-weight: bold;
                text-align: center;
              }
              h1 {
                margin-top: 1rem;
                font-size: 0.88rem;
                font-weight: bold;
                margin-bottom: 6.13rem;
                text-align: center;
              }
              h2 {
                margin-top: 0;
              }
            }
            a:hover {
              h2 {
                color: red;
              }
            }
            &:nth-child(5n) {
              margin-right: 0rem;
            }
          }
        }
        .more {
          margin: 0 44% 5rem;
          width: 9rem;
          height: 3.4rem;
          background: #000000ff;
          font-size: 15px;
          font-family: inherit;
          border: none;
          position: relative;
          overflow: hidden;
          z-index: 1;
          box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
          color: #ffffffff;
          font-size: 0.75rem;
          font-weight: bold;
        }
        .more::before {
          content: '';
          width: 0;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-image: linear-gradient(to right, red 0%, red 100%);
          transition: 0.5s ease;
          display: block;
          z-index: -1;
        }
        .more:hover::before {
          width: 100%;
        }
      }
    }
  }
  footer {
    .footer-header {
      position: relative;
      width: 100%;
      height: 3.13rem;
      background: #cbcccdff;
      .introduce {
        position: absolute;
        top: 0.96rem;
        left: 4.69rem;
        width: 8.18rem;
        height: 1.2rem;
        span {
          color: #000000ff;
          font-weight: 700;
          font-family: 'Arial';
          text-align: left;
          line-height: 0.9rem;
          letter-spacing: 0.14rem;
          font-size: 0.75rem;
        }
        :nth-child(2) {
          font-family: campton, arial, sans-serif;
          font-weight: 700;
          font-style: normal;
        }
        a:hover {
          color: red;
        }
      }
    }
    .footer-content {
      width: 100%;
      height: 18.52rem;
      background: #000000ff;
      padding: 3.31rem 0 0 3.75rem;
      .content {
        width: 74.37rem;
        height: 11.21rem;
        display: flex;
        .row {
          width: 15rem;
          height: 10.65rem;
          p {
            width: 9.31rem;
            height: 1.5rem;
            opacity: 1;
            color: #ffffffff;
            font-size: 1.25rem;
            font-weight: 400;
            font-family: 'Arial';
            text-align: left;
            line-height: 1.5rem;
            margin-bottom: 1.88rem;
          }
          ul {
            width: 16.72rem;
            li {
              a {
                display: inline-block;
                opacity: 1;
                color: #ffffffff;
                font-size: 1rem;
                font-weight: 400;
                font-family: 'PingFang SC';
                text-align: left;
                line-height: 1.3rem;
                margin-bottom: 1.24rem;
                padding-bottom: 0.2rem;
              }
              a:hover {
                border-bottom: 1px solid red;
                color: red;
              }
            }
          }
        }
        .website {
          width: 31.59rem;
          ul {
            li {
              .iconfont {
                margin-right: 0.75rem;
                color: white;
              }
            }
          }
        }
      }
      .remind {
        margin-top: 1.75rem;
        p {
          text-align: center;
          height: 1.19rem;
          color: #ffffffff;
          font-size: 1rem;
          font-weight: 400;
          font-family: 'PingFang SC';
          text-align: center;
          line-height: 1.25rem;
        }
      }
    }
    .policy {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
      height: 7.39rem;
      border: 0.13rem solid #313435ff;
      background: #000000ff;
      position: relative;
      img {
        width: 28.86rem;
        height: 7.26rem;
      }
      .ordinance {
        position: absolute;
        right: 22.33rem;
        display: flex;
        justify-content: space-around;
        li {
          height: 0.94rem;
          color: #ffffffff;
          font-size: 0.75rem;
          font-weight: 400;
          font-family: 'PingFang SC';
          text-align: left;
          line-height: 0.9rem;
          a {
            color: #ffffffff;
            font-size: 0.75rem;
            font-weight: 400;
            margin-right: 2rem;
            padding-bottom: 0.2rem;
          }
          a:hover {
            border-bottom: 1px solid red;
            color: red;
          }
        }
      }
    }
    .call {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      height: 3.44rem;
      background: #e8e8e8ff;
    }
    .bottom {
      height: 4.13rem;
      background: #e8e8e8ff;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .bottom-content {
        margin: 0 auto;
        width: 65.63rem;
        height: 2.56rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        span {
          height: 0.94rem;
          color: #000000ff;
          font-size: 0.75rem;
          font-weight: 400;
          font-family: 'PingFang SC';
          text-align: center;
          line-height: 1.25rem;
        }
      }
    }
  }
}
